<template>
  <div class="layout-col flex1">
    <div class="hh100 p15 rad3 overlay" style="background: rgba(38, 99, 170, 0.25);" >
      <div class="flex-sc ww100 mb15">
        <!-- <span class="w100 mr5">选择时间：</span> -->
        <div class="flex1 flex-sc ">
          <el-radio-group v-model="state.selectTime" v-if="state.selectTime != '-1'" :disabled="publicStore.status == 1?false:true">
            <el-radio style="margin-right: 8px" v-for="(v, i) in state.selectTimeList" :label="v.value" :key="v.value">{{v.name}}</el-radio>
          </el-radio-group>
          <div class="flex-sc flex1" v-if="state.selectTime == '-1'">
            <el-date-picker :disabled="publicStore.status == 1?false:true" style="width: 120px; height: 30px; font-size: 12px" class="flex1 mr10" v-model="state.datetimetwo" @change="changeData" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
            <div class="ptb7 plr8 flex-cc cursor white f12 bgi3 rad4" @click="state.selectTime='2'">返回</div>
          </div>
        </div>
      </div>
      <div class="flex-sc ww100 mb15">
        <span class="w100 mr5">监控类型：</span>
        <span class="ptb4 plr10 tc cursor" :class="publicStore.status == 0 ? 'bgi1':'bga'" @click="publicStore.status = 0">实时</span>
        <span class="ptb4 plr10 tc cursor" :class="publicStore.status == 0 ? 'bga':'bgi1'" @click="publicStore.status = 1">历史</span>
      </div>
      <div class="flex-sc ww100 mb15" v-if="publicStore.form.isAlarm">
        <span class="w100 mr5">诊断类型：</span>
        <span class="flex1 line2" :class="publicStore.form.isAlarm?publicStore.form.isAlarm=='0'?'i21':'i8':''">
          {{publicStore.form.isAlarm?publicStore.form.isAlarm=='0'?'无':find(publicStore._public.alarmTypeList, ['alarm_code', publicStore.form.isAlarm], 'alarm_name'):''}}
        </span>
      </div>
      <div class="flex-sc ww100 mb15" v-if="publicStore.form.isAlarm">
        <span class="w100 mr5">诊断结果：</span>
        <span class="flex1 line2" :class="publicStore.form.isAlarm?publicStore.form.isAlarm=='0'?'i21':'i8':''">
          {{publicStore.form.isAlarm?publicStore.form.isAlarm=='0'?'正常':'异常':''}}
        </span>
      </div>
      <div class="flex-sc ww100 mb15" v-if="!isNull(publicStore._public.cfg)" v-for="(v, i) in publicStore._public.cfg.values" :key="i">
        <span class="w100 mr5">{{v.name}}：</span>
        <span class="flex1 line2 i21" v-if="publicStore.form[v.code]">
          <span v-if="v.code == 'offline'" class="fw" :class="publicStore.form[v.code] == 1?'i8':'i21'">
            {{publicStore.form[v.code] == 0? '在线' : publicStore.form[v.code] == 1? '离线' : '故障'}}
          </span>
          <span 
            v-else-if="v.name.indexOf('水浸') != -1 || v.name.indexOf('烟感') != -1" 
            class="fw" :class="publicStore.form[v.code] == 1?'i8':'i21'">
            {{publicStore.form[v.code] == 0? '正常' : publicStore.form[v.code] == 1? '异常' : '/'}}
          </span>
          <span 
            v-else-if="v.name.indexOf('分合') != -1 || v.name.indexOf('开关') != -1" 
            class="fw" :class="publicStore.form[v.code] == 1?'i6':'i21'">
            {{publicStore.form[v.code] == 0? '分' : publicStore.form[v.code] == 1? '合' : '/'}}
          </span>
          <span 
            v-else-if="v.name.indexOf('门') != -1" 
            class="fw" :class="publicStore.form[v.code] == 1?'i21':'i6'">
            {{publicStore.form[v.code] == 0? '关' : publicStore.form[v.code] == 1? '开' : '/'}}
          </span>
          <span v-else>{{Math.round(publicStore.form[v.code]*100)/100}}</span>
          <span>{{v.dw?v.dw:''}}</span>
        </span>
      </div>
      <div class="flex-sc ww100 mb15">
        <span class="w100 mr5">采样时间：</span>
        <span class="flex1 line2">{{isNull(publicStore.form.timestamp)?'':parseTime(publicStore.form.timestamp)}}</span>
      </div>
      <div class="flex-sc ww100 mb15">
        <span class="w100 mr5">安装位置：</span>
        <span class="flex1 line2">{{isNull(publicStore.form.instlPos)?'':publicStore.form.instlPos}}</span>
      </div>
      <div class="flex-sc ww100 mb15">
        <span class="w100 mr5">设备类型：</span>
        <span class="flex1 line2">{{find(state.typeList, ['type', publicStore.form.type], 'name')}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const state = reactive({
  ...publicStore.$state,
  alarmList: [],
  typeList: [],
  datetimetwo: [],
  selectTimeList: [
    {value: '1', name: '一小时内'},
    {value: '2', name: '一天内'},
    {value: '3', name: '七天内'},
    {value: '-1', name: '自定义'},
  ],
  selectTime: '2',
});

onMounted(async () => {
  init();
});

const init = async() => {
  let query1 = {"o":"o_sensor_template"}
  let query2 = {"o":"o_sensor_alarm_type", "p": [route.query.type], "i": 0}
  let params = {queryApi1: query1, queryApi2: query2}
  let res = await publicStore.post(params)
  state.typeList = proxy.isNull(res.queryApi1)? [] : res.queryApi1
  publicStore._public.alarmTypeList = proxy.isNull(res.queryApi2)? [] : res.queryApi2
}

watch(() => publicStore.status, async (val) => {
  if(val == 0) return
  state.selectTime = proxy.isNull(route.query.alarm_time)? '2' : '-1'
  setTime(state.selectTime)
},{ immediate: false, deep: true });

watch(() => state.selectTime, async (val) => {
  setTime(val)
},{ immediate: false, deep: true });

const setTime = (val) => {
  let start = ''
  let end = new Date().getTime() + ''
  if(val == '1') start = Number(end) - 1*60*60*1000 + ''
  if(val == '2') start = Number(end) - 24*60*60*1000 + ''
  if(val == '3') start = Number(end) - 7*24*60*60*1000 + ''
  if(val == '-1') {
    if(proxy.isNull(route.query.alarm_time)) return state.datetimetwo = []
    start = (Number(route.query.alarm_time) - 60*60*1000) + ''
    end = Number(route.query.alarm_time) + ''
    state.datetimetwo = [proxy.parseTime(Number(start)), proxy.parseTime(Number(end))]
  } 
  publicStore.datetime = [start, end]
}

const changeData = () => {
  let start = Date.parse(state.datetimetwo[0]) + ''
  let end = Date.parse(state.datetimetwo[1]) + ''
  publicStore.datetime = [start, end]
}
</script>

<style scoped lang="scss">

</style>
